import React, { PureComponent } from 'react'
import { HomeWrapper, HomeLeft, HomeRight, BackTop } from './style'
import Topic from './components/Topic'
import List from './components/List'
import Recommend from './components/Recommend'
import Writer from './components/Writer'
import { connect } from 'react-redux'
import { getHomeInfo, toggleTopShow } from './store'
class Home extends PureComponent {

    constructor(props) {
        super(props)
        this.state = {

        }
    }

    handleScrollTop() {
        window.scrollTo(0, 0)
    }
    render() {
        return (
            <div>
                <HomeWrapper>
                    <HomeLeft>
                        <img className="banner-img" src="https://upload.jianshu.io/admin_banners/web_images/4876/a6157b042b15d25667e0ecab9fa130a054cbf1b6.png?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="" />
                        <Topic></Topic>
                        <List></List>
                    </HomeLeft>
                    <HomeRight>
                        <Recommend></Recommend>
                        <Writer></Writer>
                    </HomeRight>
                    {this.props.showScroll ? <BackTop onClick={this.handleScrollTop}>回到顶部</BackTop> : null}
                </HomeWrapper>
            </div>
        )
    }
    componentDidMount() {
        this.props.changeHomeDate()
        this.bindEvents()
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.props.changeScrollTopShow)
    }
    bindEvents() {
        window.addEventListener('scroll', this.props.changeScrollTopShow)
    }
}
const mapStateToProps = (state, props) => {
    return {
        showScroll: state.getIn(['home', 'showScroll'])
    }
}


function mapDispatchToProps(dispatch, props) {
    return {
        changeHomeDate() {
            const action = getHomeInfo()
            dispatch(action)
        },
        changeScrollTopShow(e) {
            // console.log(document.documentElement.scrollTop);
            if (document.documentElement.scrollTop > 100) {
                dispatch(toggleTopShow(true))
            } else {
                dispatch(toggleTopShow(false))

            }
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)
